<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataTable</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/dataTables.bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>

<body onload="initDataTable()">
<!--位置div-->
<!--DataTable-->
<div class="rightinfo" style="position:relative; width: 85%; left: 50%; transform: translate(-50%)">
    <div>
        <table class="table table-striped table-bordered table-hover datatable" id="record_list">
            <thead>
            <tr>
                <th class="table-checkbox"><input type="checkbox" class="group-checkable" data-set="#record_list .checkboxes" /></th>
                <th>用户名</th>
                <th>mail</th>
                <th>用户权限级别</th>
                <th>姓名</th>
                <th>性别</th>
                <th>注册日期</th>
                <th>最后登录日期</th>
                <th>最后修改日期</th>
                <th>是否员工</th>
            </tr>
            </thead>
        </table>
    </div>

</div>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>

<script>
    let type=this.location.search;
    let data=type.split("sort=");
    let sort=data[1];
    // 获取上页传入的信息
    sort=decodeURI(sort);
    function initDataTable(){
        // 初始化DataTable！
        init();
    }

    function init(){
        $('.datatable').dataTable({
            "paging": true,
            "searching": false,
            "oLanguage": {
                "aria": {
                    "sortAscending": ": activate to sort column ascending",
                    "sortDescending": ": activate to sort column descending"
                },
                "sProcessing": "处理中...",
                "sLengthMenu": "_MENU_ 记录/页",
                "sZeroRecords": "没有匹配的记录",
                "sInfo": "显示第 _START_ 至 _END_ 项记录，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项记录，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项记录过滤)",
                "sInfoPostFix": "",
                "sSearch": "过滤:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                }
            },
            "aoColumns": [{
                "mRender": function (data, type, full) {
                    sReturn = '<input type="checkbox" class="checkboxes" value="' + data + '"/>';
                    return sReturn;
                }, "orderable": false
            }, {
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.account+"</div>";
                    return sReturn;
                }, "orderable": false
            }, {
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.mail+"</div>";
                    return sReturn;
                }, "orderable": false
            }, {
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.userLevel+"</div>";
                    return sReturn;
                }, "orderable": false
            }, {
                "mRender": function (data, type, full) {
                    sReturn ="<div>"+full.userName+"</div>";
                    return sReturn;
                }, "orderable": false
            },{
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.userGender+"</div>";
                    return sReturn;
                }, "orderable": false
            },{
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.signUpDate+"</div>";
                    return sReturn;
                }, "orderable": false
            },{
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.lastLoginDate+"</div>";
                    return sReturn;
                }, "orderable": false
            },{
                "mRender": function (data, type, full) {
                    sReturn = "<div>"+full.lastModifyDate+"</div>";
                    return sReturn;
                }, "orderable": false
            },{
                "mRender": function (data, type, full) {
                    let temp;
                    if(full.isWorker===1){
                        temp="是";
                    }else{
                        temp="否";
                    }
                    sReturn = "<div>"+temp+"</div>";
                    return sReturn;
                }, "orderable": false
            }],
            "aLengthMenu": [[5, 10, 15, 20, 25, 40, 50, -1], [5, 10, 15, 20, 25, 40, 50, "所有记录"]],
            "fnDrawCallback": function () {
                $(".checkboxes").uniform();
                $(".group-checkable").uniform();
            },
            "sAjaxSource": "../Login_ServletAction?Action=getUserRecord&sort="+sort
        });
        $('.datatable').find('.group-checkable').change(function () {
            var set = jQuery(this).attr("data-set");
            var checked = jQuery(this).is(":checked");
            jQuery(set).each(function () {
                if (checked) {
                    $(this).attr("checked", true);
                    $(this).parents('tr').addClass("active");
                } else {
                    $(this).attr("checked", false);
                    $(this).parents('tr').removeClass("active");
                }
            });
            jQuery.uniform.update(set);
        });
        $('.datatable').on('change', 'tbody tr .checkboxes', function () {
            $(this).parents('tr').toggleClass("active");
        });
    };
</script>
</html>
